<template>
  <div class="login-page">
    <CateHea class="login-hea">
      <template #left><i class="iconfont icon-zuojiantou" @click="goBack"></i></template>
      <template #center><span>登录</span></template>
    </CateHea>
    <div class="page">
      <div class="wrap">
        <div class="login-txt">
          <input type="text" placeholder="用户名/邮箱/已验证手机" class="userName-txt" @focus="focusText" @blur="blurText" v-model="username" />
          <i class="iconfont icon-guanbi" v-if="!userNameClose" data-close="username" @click="clearText"></i>
        </div>
        <div class="login-txt">
          <div class="left">
            <input type="password" placeholder="请输入密码" @focus="focusText" @blur="blurText" ref="passwordShow" v-model="password" />
            <i class="iconfont icon-guanbi" v-if="!passwordClose" @click="clearText" data-close="password"></i>
          </div>
          <div class="right">
            <i class="iconfont icon-yanjing_yincang_o" @click="changeType" v-if="!passwordDisplsy"></i>
            <i class="iconfont icon-yanjing_xianshi_o" v-else @click="changeType"></i>
            <router-link tag="span" to="/forgotPassword">忘记密码</router-link>
          </div>
        </div>
      </div>
      <div class="login-error">{{ errMsg }}</div>
      <button class="login-btn" @click="postLogin">登录</button>
      <div class="reg"><router-link to="/register" tag="span" class="reg-btn">快速注册</router-link></div>
      <div class="other">
        <div class="other-hea">
          <i></i>
          <span>其他登录方式</span>
          <i></i>
        </div>
        <div class="other-con">
          <div class="login-icon" @click="QQHand">
            <i class="iconfont icon-QQ-circle-fill"></i>
            <span>QQ</span>
          </div>
          <div class="login-icon">
            <i class="iconfont icon-weixin"></i>
            <span>微信</span>
          </div>
        </div>
        <p class="other-footer">登录即代表您已同意<a href="javascript:;">知心购隐私政策</a></p>
      </div>
    </div>
    <!-- <van-popup v-model="show" closeable close-icon-position="top-left" position="bottom" :style="{ height: '100%' }">
      <iframe
        src="https://graph.qq.com/oauth2.0/authorize?response_type=token&client_id=101850878&redirect_uri=http://localhost:3000/proxy&state=1"
        frameborder="0"
      ></iframe>
    </van-popup> -->
  </div>
</template>

<script>
import CateHea from '@/components/common/CateHea'
import { login } from '@/http/index.js'
import { mapMutations } from 'vuex'
export default {
  components: { CateHea },
  data() {
    return {
      username: '',
      password: '',
      errMsg: '',
      userNameClose: true,
      passwordClose: true,
      passwordDisplsy: false,
      show: false,
    }
  },
  methods: {
    ...mapMutations(['setToken', 'userInfo', 'recommendList', 'carList']),
    goBack() {
      this.$router.push('/home')
    },
    QQHand() {
      window.location.href =
        'https://graph.qq.com/oauth2.0/authorize?response_type=token&client_id=101850878&redirect_uri=http://localhost:8080/proxy&state=1'
      // this.$QQ.Login.showPopup({
      //   appId: '101850878',
      //   redirectURI: 'http://localhost:8080/proxy',
      // })
      // this.$router.push('/proxy')
    },
    showauth() {
      this.show = !this.show
    },
    postLogin() {
      if (!this.username.trim() || !this.password.trim()) {
        return
      }
      const p = {
        username: this.username,
        password: this.password,
      }
      login(p).then((res) => {
        if (res.status == 0) {
          // console.log(res.data)
          // localStorage.setItem('zxgToken', res.data.token)
          this.setToken({ token: res.data.token })
          this.$store.dispatch('getInfo')
          this.$store.dispatch('getRecommendDataList')
          this.$store.dispatch('getCarDataList')
          this.$router.replace('/user')
        } else {
          this.errMsg = res.msg ? res.msg : '登录失败'
          this.$toast.fail(this.errMsg)
        }
      })
    },
    focusText(e) {
      let tempClass = e.currentTarget.className
      tempClass === 'userName-txt' ? (this.userNameClose = false) : (this.passwordClose = false)
    },
    blurText(e) {
      let tempClass = e.currentTarget.className
      tempClass === 'userName-txt' ? (this.userNameClose = true) : (this.passwordClose = true)
    },
    changeType() {
      let tempType = this.$refs.passwordShow.getAttribute('type'),
        value = ''
      console.log(tempType)
      tempType === 'password' ? (value = 'text') : (value = 'password')
      this.passwordDisplsy = !this.passwordDisplsy
      this.$refs.passwordShow.setAttribute('type', value)
    },
    clearText(e) {
      let closeName = e.currentTarget.getAttribute('data-close')
      // console.log(closeName)
      closeName === 'password' ? (this.password = '') : (this.username = '')
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/mixin.scss';
.login-hea {
  background-color: #f7f7f7;
  .iconfont {
    margin-right: -50px;
    font-size: 50px;
  }
}
.login-page {
  padding: 100px 25px 0;
  width: 100%;
  box-sizing: border-box;
  .page {
    margin-top: 50px;
    font-size: 30px;
    .wrap {
      width: 100%;
      .login-txt {
        @include fj;
        margin-top: 10px;
        padding: 10px 0;
        width: 100%;
        height: 60px;
        line-height: 60px;
        border-bottom: 1px solid #dcdcdc;
        input {
          width: 90%;
        }
        .right {
          @include fj;
          i {
            padding: 0 15px;
            border-right: 1px solid #dcdcdc;
          }
          span {
            padding-left: 15px;
          }
        }
      }
    }
    .login-error {
      width: 100%;
      height: 20px;
      line-height: 20px;
      text-align: center;
      padding: 15px 0;
      color: #f63515;
      font-size: 12px;
    }
    .login-btn {
      width: 100%;
      height: 100px;
      border-radius: 50px;
      color: white;
      background-color: orangered;
    }
    .reg {
      padding: 15px 0;
      width: 100%;
      text-align: right;
      .reg-btn {
        height: 100%;
        color: #666;
      }
    }
    .other {
      padding-top: 150px;
      width: 100%;
      .other-hea {
        width: 100%;
        @include fj;
        i {
          flex: 1;
          height: 1px;
          margin-top: 18px;
          background-color: #dcdcdc;
        }
        span {
          flex: 1;
          text-align: center;
          font-size: 30px;
          color: #dcdcdc;
        }
      }
      .other-con {
        display: flex;
        margin: 0 80px;
        padding: 20px 0;
        .login-icon {
          display: flex;
          flex-direction: column;
          flex: 1;
          text-align: center;
          i {
            font-size: 80px;
          }
          span {
            font-size: 20px;
          }
        }
      }
      .other-footer {
        margin-top: 20px;
        width: 100%;
        text-align: center;
        font-size: 20px;
        a {
          margin-left: 10px;
          color: skyblue;
        }
      }
    }
  }
}
</style>
